<template>
  <div id="index">
    <banner :course="courses"></banner>
    <Nav @tabclick="tabconChange"></Nav>
    <div class="tab-con" v-show="showDetail">
      <router-view></router-view>
    </div>

    <div class="tab-con" v-show="!showDetail">
      <Menu></Menu>
    </div>
  </div>
</template>

<script>
  import banner from '@/components/banner'
  import Nav from '@/components/Nav'
  import Menu from '@/components/menu'
  export default {
    name: 'index',
    data(){
      return{
        courses:{

          banner:require('@/assets/images/banner.png')
        },
        showDetail:true
      }
    },
    components:{
      banner,
      Nav,
      Menu
    },
    methods:{
      tabconChange(index){
        console.log(index);
        this.showDetail=(index.index==0)?true:false;
        console.log(this.showDetail);
      }
    }
  }
</script>

<style>

</style>
